<template>
	<view class="w">
		<image class="top-bg" src="../static/login/bg_img.png" />
		<view class="main">
			<view class="f-item">
				<view class="f-label">真实姓名</view>
				<input type="text" class="f-set" v-model="formItem.name" clearable height="92"
					placeholder="请输入您的真实姓名"></input>
			</view>
			<view class="f-item">
				<view class="f-label">手机号码</view>
				<input type="number" class="f-set" v-model="formItem.phone" maxlength="11" clearable height="92"
					placeholder="请输入您的联系电话"></input>

			</view>
			<view class="f-item">
				<view class="f-label">验证码</view>
				<input type="text" class="f-set" v-model="formItem.vcode" maxlength="4" clearable height="92"
					placeholder="请输入手机验证码"></input>
				<view class="get-code" @click=" getPhoneCode">{{codeText}}</view>
			</view>
			<view class="f-item" @click="openArea">
				<view class="f-label">所在地区</view>
				<view type="text" placeholder='请输入地区' style="" class="f-set"
					:class="{'uniActive': formItem.provincialCityDistrict == ''}">
					{{ formItem.provincialCityDistrict  || '请选择您所在的省/市/区'}}
				</view>
				<image src="/static/login/arrow.png" style="width: 28rpx;height: 28rpx;z-index: 10;" class="get-code arrow"></image>
			</view>
			<view class="f-item">
				<view class="f-label">车辆品牌</view>
				<input type="text" class="f-set" v-model="formItem.carDiy" maxlength="6" clearable height="92"
					placeholder="请输入您的车辆品牌"></input>
			</view>
			<view class="submit_btn" @click="onSubmit">提交</view>
		</view>
		<view class="bottom_box">
			<image class="image1" src="../static/login/red_login_bottom1.png" mode=""></image>
		<!-- 	<image class="image2" src="../static/login/red_login_bottom2.png" mode=""></image>
			<image class="image3" src="../static/login/red_login_bottom3.png" mode=""></image> -->
		</view>
		<u-verification-code :seconds="60" ref="uCode" @change="codeChange" change-text="x秒后重新获取"
			unique-key="login"></u-verification-code>
		<u-picker round="10" v-model="showArea" title="选择地址" ref="uPicker" @confirm="getAddress"
			@cancel="showArea=false" closeOnClickOverlay @close="showArea=false" mode="region"
			:params="{province: true,city: true,area: true}"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formItem: {
					phone: '',
					vcode: '',
					name: '',
					provincialCityDistrict:'',
					channelId: 100023
				},
				codeText: '获取验证码',
				showArea:false
			}
		},
		onLoad(e) {
			this.formItem.channelId = e.id || 100023
		},
		methods: {
			getAddress(e) {
				console.log('选择的地址是', e);
				this.formItem.provincialCityDistrict = e.province.label + ',' + e.city.label + ',' + e.area.label
			},
			openArea() {
				this.showArea = true
				//this.$refs.dialog.show = true
			},
			async onSubmit() {
				const values = await this.verifyForm([{
						name: 'name',
						message: '请输入真实姓名'
					},
					{
						name: 'phone',
						message: '请填写手机号'
					},
					{
						name: 'vcode',
						message: '请填写验证码'
					},
					{
						name: 'provincialCityDistrict',
						message: '请填写所在地区'
					}
				], this.formItem);

				// console.log(values, '--------->')
				// return
				this.$request({
					url: '/ClientUserController/verifyVCode',
					method: 'get',
					data: {
						...values,
						theme: 'red'
					}
				}).then(res => {
					console.log(res, '-------')
					if (res.code == 200) {
						uni.setStorageSync('userObj', JSON.stringify(values))
						uni.navigateTo({
							url: '/pages/successPage'
						})
						//this.showPop = true
					}
				})
			},
			/**
			 * @param {Array} array 
			 * @param {Object} formValues
			 **/
			verifyForm(array, formValues) {
				return new Promise((resolve, reject) => {
					let result = true;
					for (let index = 0; index < array.length; index++) {
						const formItem = array[index];
						if (!formValues[formItem.name]) {
							result = false;
							uni.showToast({
								title: formItem.message,
								icon: 'none'
							});
							break;
						}
					}
					if (result) resolve({
						...formValues
					});
					else reject(false);

				})
			},
			getPhoneCode() {
				if (!this.formItem.phone) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						mask: true
					})
					this.$request({
						url: '/ClientUserController/sendSMSVcode',
						method: 'get',
						data: this.formItem
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '验证码已发送',
								icon: 'none'
							})
							this.$refs.uCode.start();
						}
					})
				}
			},
			codeChange(text) {
				this.codeText = text;
			},

		}
	}
</script>
<style>
	page {
		background-color: #F5F7FA;
	}
</style>
<style lang="scss" scoped>
	.w{
		.top-bg {
			width: 100%;
			height: 800rpx;
		}
		
		.main {
			width: 95%;
			border-radius: 24rpx;
			margin: auto;
			background-color: #fff;
			padding: 24rpx;
		
			.f-item {
				position: relative;
				margin-top: 24rpx;
				width: 100%;
		
				&~.f-item {
					margin-top: 48rpx;
				}
		
				.f-label {
					font-size: 28rpx;
					font-weight: 400;
					color: #292929;
					line-height: 28rpx;
				}
		
				.f-set {
					margin-top: 24rpx;
					padding: 0 24rpx !important;
					height: 92rpx;
					line-height: 92rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #EBEBEB;
					font-size: 28rpx;
					font-weight: 400;
					// width: 100%;
		
		
					&.uniActive {
						color: rgb(192, 196, 204);
					}
				}
		
				.get-code {
					position: absolute;
					right: 24rpx;
					bottom: 34rpx;
					z-index: 10;
					padding-left: 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 28rpx;
					color: #FF4629;
					
					// &.color-297EFF {
					// 	color: #297EFF;
					// }
		
					&.arrow {
						padding: 0;
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		
			.submit_btn {
				margin-top: 48rpx;
				margin-bottom: 18rpx;
				width: 100%;
				line-height: 96rpx;
				background: linear-gradient(180deg, #FF5C71 0%, #FF2945 100%);
				border-radius: 48rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
		
		.bottom_box {
			width: 95%;
			margin: 24rpx auto;
			padding-bottom: 36rpx;
		
			.image1 {
				width: 100%;
				height: 316rpx;
			}
		
			.image3,
			.image2 {
				width: 100%;
				height: 1040rpx;
				margin-top: 36rpx;
			}
		
			.image3 {
				margin-top: 24rpx;
			}
		}
	}
 @media only screen and (min-width: 750px){
	 .w{
		 width: 1200px;
		 margin: auto;
		 .top-bg{
			 width: 100%;
			 height: 95vh;
		 }
		 .bottom_box{
			 .image1{
				 object-fit: cover;
				 height: 430px;
			 }
		 }
	 }
 }
</style>